<template>
  <view class="wrap">
    <view class="timeGame">
      <text class="time">时间 {{ gameTime }}</text>
    </view>
    <view class="listWrap">
      <view
        :class="[
          'listWraps',
          sdNum == 4
            ? 'listWrapsFour'
            : sdNum == 5
              ? 'listWrapsFive'
              : sdNum == 6
                ? 'listWrapsSix'
                : ''
        ]"
        v-if="sdNum == 4 || sdNum == 5 || sdNum == 6"
      >
        <view
          :class="[
            'items',
            item.active == 'on' ? 'on' : item.active == 'error' ? 'error' : '',
            activeOn == index ? 'active' : ''
          ]"
          v-for="(item, index) in rightListOld"
          :key="index"
          @click="chooseNum(item, index)"
        >
          {{ item.num }}
        </view>
      </view>
      <view class="listWraps listWrapsFour" v-else>
        <view class="items" v-for="(item, index) in 16" :key="index" />
      </view>
      <view class="numberWrap" v-if="sdNum == 4 || sdNum == 5 || sdNum == 6">
        <view class="title">填入数字，保证每一行列的数字不重复</view>
        <view class="number">
          <text
            class="item"
            @click="fillIn(item)"
            v-for="(item, index) in numberList"
            :key="index"
            >{{ item }}</text
          >
        </view>
      </view>
      <view class="'numberWrap numberWrapFour'" v-else>
        <view class="title">填入数字，保证每一行列的数字不重复</view>
        <view class="number">
          <text class="item" v-for="(item, index) in numberList" :key="index">{{ item }}</text>
        </view>
      </view>
    </view>
    <view class="zhezhao" v-if="zhezhaoShow">
      <text class="bg" />
      <view class="zhezhaoWrap" v-if="chooseShow">
        <view class="title">选择难度</view>
        <view class="btnWrap">
          <view class="btn" @click="chooseLevel(4)">
            <img class="img" src="@/static/image/sdBtn.png" alt="" />
            <text class="name">简 单</text>
          </view>
          <view class="btn" @click="chooseLevel(5)">
            <img class="img" src="@/static/image/sdBtn.png" alt="" />
            <text class="name">普 通</text>
          </view>
          <view class="btn" @click="chooseLevel(6)">
            <img class="img" src="@/static/image/sdBtn.png" alt="" />
            <text class="name">困 难</text>
          </view>
        </view>
      </view>
      <view class="startGame" v-else>
        <view class="btnWrap">
          <view class="btn" @click="startGameFun">
            <img class="img" src="@/static/image/sdBtn.png" alt="" />
            <text class="name">开始游戏</text>
          </view>
        </view>
      </view>
    </view>
    <view
      :class="['zhezhao zhezhaoState', zhezhaoShowState == true ? 'on' : '']"
      class="zhezhao zhezhaoState"
      v-if="zhezhaoShowState"
    >
      <text class="bg" />
      <view class="zhezhaoStateWrap">
        <view v-if="zhezhaoIsSuccess">
          <view class="title">完成训练!</view>
          <view class="consuming">
            <text class="name">耗时</text>
            <text class="time" v-if="Number(timeMin) > 0">{{ Number(timeMin) }}</text>
            <text class="name mr24" v-if="Number(timeMin) > 0">分</text>
            <text class="time">{{ timeSeconds }}</text>
            <text class="name ml24">秒</text>
          </view>
        </view>
        <view v-else class="title overTime">游戏超时自动结束</view>
        <view class="btnWrap">
          <view class="btn" @click="trainAgain(1)">
            <img class="img" src="@/static/image/sdBtn.png" alt="" />
            <text class="name">再次训练</text>
          </view>
          <view class="btn" @click="trainAgain(2)">
            <img class="img" src="@/static/image/sdBtn.png" alt="" />
            <text class="name">退出训练</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onShow, onUnload } from '@dcloudio/uni-app'
//选择难度
const zhezhaoShow = ref(true)
const chooseShow = ref(true)
const sdNum = ref(0)
const sdNumOld = ref(0)
const rightListOld = ref([])
const randomNum = ref(0)
const rowList = ref([
  {
    question: [
      [0, 0, 0, 0],
      [0, 2, 3, 1],
      [0, 3, 2, 4],
      [2, 1, 0, 3]
    ],
    answer: [
      [3, 4, 1, 2],
      [4, 2, 3, 1],
      [1, 3, 2, 4],
      [2, 1, 4, 3]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '4-1',
      '4-2',
      '4-3',
      '4-4'
    ],
    state: [
      'false',
      'false',
      'false',
      'false',
      'false',
      'true',
      'true',
      'true',
      'false',
      'true',
      'true',
      'true',
      'true',
      'true',
      'false',
      'true'
    ]
  },
  {
    question: [
      [2, 0, 0, 3],
      [3, 0, 2, 1],
      [0, 2, 3, 0],
      [0, 0, 0, 2]
    ],
    answer: [
      [2, 1, 4, 3],
      [3, 4, 2, 1],
      [1, 2, 3, 4],
      [4, 3, 1, 2]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '4-1',
      '4-2',
      '4-3',
      '4-4'
    ],
    state: [
      'true',
      'false',
      'false',
      'true',
      'true',
      'false',
      'true',
      'true',
      'false',
      'true',
      'true',
      'false',
      'false',
      'false',
      'false',
      'true'
    ]
  },
  {
    question: [
      [1, 0, 0, 0],
      [4, 2, 3, 0],
      [0, 4, 1, 0],
      [3, 1, 0, 2]
    ],
    answer: [
      [1, 3, 2, 4],
      [4, 2, 3, 1],
      [2, 4, 1, 3],
      [3, 1, 4, 2]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '4-1',
      '4-2',
      '4-3',
      '4-4'
    ],
    state: [
      'true',
      'false',
      'false',
      'false',
      'true',
      'true',
      'true',
      'false',
      'false',
      'true',
      'true',
      'false',
      'true',
      'true',
      'false',
      'true'
    ]
  },
  {
    question: [
      [3, 0, 1, 0],
      [0, 1, 2, 0],
      [2, 0, 3, 0],
      [0, 3, 0, 2]
    ],
    answer: [
      [3, 2, 1, 4],
      [4, 1, 2, 3],
      [2, 4, 3, 1],
      [1, 3, 4, 2]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '4-1',
      '4-2',
      '4-3',
      '4-4'
    ],
    state: [
      'true',
      'false',
      'true',
      'false',
      'false',
      'true',
      'true',
      'false',
      'true',
      'false',
      'true',
      'false',
      'false',
      'true',
      'false',
      'true'
    ]
  },
  {
    question: [
      [0, 0, 3, 0],
      [0, 2, 0, 1],
      [0, 3, 2, 4],
      [0, 4, 1, 0]
    ],
    answer: [
      [4, 1, 3, 2],
      [3, 2, 4, 1],
      [1, 3, 2, 4],
      [2, 4, 1, 3]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '4-1',
      '4-2',
      '4-3',
      '4-4'
    ],
    state: [
      'false',
      'false',
      'true',
      'false',
      'false',
      'true',
      'false',
      'true',
      'false',
      'true',
      'true',
      'true',
      'false',
      'true',
      'true',
      'false'
    ]
  },
  {
    question: [
      [0, 1, 4, 0],
      [4, 2, 0, 1],
      [0, 0, 0, 0],
      [0, 4, 2, 3]
    ],
    answer: [
      [3, 1, 4, 2],
      [4, 2, 3, 1],
      [2, 3, 1, 4],
      [1, 4, 2, 3]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '4-1',
      '4-2',
      '4-3',
      '4-4'
    ],
    state: [
      'false',
      'true',
      'true',
      'false',
      'true',
      'true',
      'false',
      'true',
      'false',
      'false',
      'false',
      'false',
      'false',
      'true',
      'true',
      'true'
    ]
  },
  {
    question: [
      [1, 0, 4, 0],
      [0, 2, 0, 3],
      [0, 1, 3, 4],
      [0, 0, 0, 1]
    ],
    answer: [
      [1, 3, 4, 2],
      [4, 2, 1, 3],
      [2, 1, 3, 4],
      [3, 4, 2, 1]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '4-1',
      '4-2',
      '4-3',
      '4-4'
    ],
    state: [
      'true',
      'false',
      'true',
      'false',
      'false',
      'true',
      'false',
      'true',
      'false',
      'true',
      'true',
      'true',
      'false',
      'false',
      'false',
      'true'
    ]
  },
  {
    question: [
      [0, 0, 0, 3],
      [0, 3, 4, 2],
      [0, 1, 0, 0],
      [4, 0, 3, 1]
    ],
    answer: [
      [2, 4, 1, 3],
      [1, 3, 4, 2],
      [3, 1, 2, 4],
      [4, 2, 3, 1]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '4-1',
      '4-2',
      '4-3',
      '4-4'
    ],
    state: [
      'false',
      'false',
      'false',
      'true',
      'false',
      'true',
      'true',
      'true',
      'false',
      'true',
      'false',
      'false',
      'true',
      'false',
      'true',
      'true'
    ]
  },
  {
    question: [
      [2, 4, 0, 0],
      [0, 1, 2, 0],
      [4, 0, 1, 0],
      [0, 3, 4, 2]
    ],
    answer: [
      [2, 4, 3, 1],
      [3, 1, 2, 4],
      [4, 2, 1, 3],
      [1, 3, 4, 2]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '4-1',
      '4-2',
      '4-3',
      '4-4'
    ],
    state: [
      'true',
      'true',
      'false',
      'false',
      'false',
      'true',
      'true',
      'false',
      'true',
      'false',
      'true',
      'false',
      'false',
      'true',
      'true',
      'true'
    ]
  },
  {
    question: [
      [1, 4, 2, 0],
      [0, 3, 1, 0],
      [0, 2, 0, 0],
      [4, 0, 3, 0]
    ],
    answer: [
      [1, 4, 2, 3],
      [2, 3, 1, 4],
      [3, 2, 4, 1],
      [4, 1, 3, 2]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '4-1',
      '4-2',
      '4-3',
      '4-4'
    ],
    state: [
      'true',
      'true',
      'true',
      'false',
      'false',
      'true',
      'true',
      'false',
      'false',
      'true',
      'false',
      'false',
      'true',
      'false',
      'true',
      'false'
    ]
  }
])
const rowListFive = ref([
  {
    question: [
      [0, 2, 3, 0, 1],
      [4, 1, 0, 0, 3],
      [0, 0, 4, 1, 0],
      [1, 5, 0, 3, 4],
      [3, 0, 1, 0, 2]
    ],
    answer: [
      [5, 2, 3, 4, 1],
      [4, 1, 5, 2, 3],
      [2, 3, 4, 1, 5],
      [1, 5, 2, 3, 4],
      [3, 4, 1, 5, 2]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '1-5',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '2-5',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '3-5',
      '4-1',
      '4-2',
      '4-3',
      '4-4',
      '4-5',
      '5-1',
      '5-2',
      '5-3',
      '5-4',
      '5-5'
    ],
    state: [
      'false',
      'true',
      'true',
      'false',
      'true',

      'true',
      'true',
      'false',
      'false',
      'true',

      'false',
      'false',
      'true',
      'true',
      'false',

      'true',
      'true',
      'false',
      'true',
      'true',

      'true',
      'false',
      'true',
      'false',
      'true'
    ]
  },
  {
    question: [
      [3, 5, 0, 2, 0],
      [2, 1, 0, 0, 4],
      [0, 4, 2, 0, 3],
      [1, 0, 0, 4, 2],
      [0, 2, 0, 3, 5]
    ],
    answer: [
      [3, 5, 4, 2, 1],
      [2, 1, 3, 5, 4],
      [5, 4, 2, 1, 3],
      [1, 3, 5, 4, 2],
      [4, 2, 1, 3, 5]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '1-5',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '2-5',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '3-5',
      '4-1',
      '4-2',
      '4-3',
      '4-4',
      '4-5',
      '5-1',
      '5-2',
      '5-3',
      '5-4',
      '5-5'
    ],
    state: [
      'true',
      'true',
      'false',
      'true',
      'false',

      'true',
      'true',
      'false',
      'false',
      'true',

      'false',
      'true',
      'true',
      'false',
      'true',

      'true',
      'false',
      'false',
      'true',
      'true',

      'false',
      'true',
      'false',
      'true',
      'true'
    ]
  },
  {
    question: [
      [0, 5, 0, 2, 3],
      [2, 3, 0, 0, 1],
      [5, 1, 2, 0, 0],
      [3, 4, 0, 1, 2],
      [0, 0, 3, 4, 0]
    ],
    answer: [
      [4, 5, 1, 2, 3],
      [2, 3, 4, 5, 1],
      [5, 1, 2, 3, 4],
      [3, 4, 5, 1, 2],
      [1, 2, 3, 4, 5]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '1-5',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '2-5',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '3-5',
      '4-1',
      '4-2',
      '4-3',
      '4-4',
      '4-5',
      '5-1',
      '5-2',
      '5-3',
      '5-4',
      '5-5'
    ],
    state: [
      'false',
      'true',
      'false',
      'true',
      'true',

      'true',
      'true',
      'false',
      'false',
      'true',

      'true',
      'true',
      'true',
      'false',
      'false',

      'true',
      'true',
      'false',
      'true',
      'true',

      'false',
      'false',
      'true',
      'true',
      'false'
    ]
  },
  {
    question: [
      [5, 0, 2, 3, 0],
      [0, 1, 0, 4, 2],
      [4, 0, 3, 0, 5],
      [1, 0, 0, 2, 3],
      [0, 3, 1, 0, 4]
    ],
    answer: [
      [5, 4, 2, 3, 1],
      [3, 1, 5, 4, 2],
      [4, 2, 3, 1, 5],
      [1, 5, 4, 2, 3],
      [2, 3, 1, 5, 4]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '1-5',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '2-5',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '3-5',
      '4-1',
      '4-2',
      '4-3',
      '4-4',
      '4-5',
      '5-1',
      '5-2',
      '5-3',
      '5-4',
      '5-5'
    ],
    state: [
      'true',
      'false',
      'true',
      'true',
      'false',

      'false',
      'true',
      'false',
      'true',
      'true',

      'true',
      'false',
      'true',
      'false',
      'true',

      'true',
      'false',
      'false',
      'true',
      'true',

      'false',
      'true',
      'true',
      'false',
      'true'
    ]
  },
  {
    question: [
      [0, 5, 4, 3, 1],
      [0, 1, 0, 5, 4],
      [5, 0, 3, 0, 2],
      [1, 2, 0, 0, 0],
      [4, 0, 1, 0, 5]
    ],
    answer: [
      [2, 5, 4, 3, 1],
      [3, 1, 2, 5, 4],
      [5, 4, 3, 1, 2],
      [1, 2, 5, 4, 3],
      [4, 3, 1, 2, 5]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '1-5',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '2-5',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '3-5',
      '4-1',
      '4-2',
      '4-3',
      '4-4',
      '4-5',
      '5-1',
      '5-2',
      '5-3',
      '5-4',
      '5-5'
    ],
    state: [
      'false',
      'true',
      'true',
      'true',
      'true',

      'false',
      'true',
      'false',
      'true',
      'true',

      'true',
      'false',
      'true',
      'false',
      'true',

      'true',
      'true',
      'false',
      'false',
      'false',

      'true',
      'false',
      'true',
      'false',
      'true'
    ]
  },
  {
    question: [
      [3, 0, 2, 0, 1],
      [0, 1, 0, 5, 0],
      [5, 0, 4, 0, 3],
      [0, 3, 0, 2, 4],
      [2, 0, 1, 3, 5]
    ],
    answer: [
      [3, 5, 2, 4, 1],
      [4, 1, 3, 5, 2],
      [5, 2, 4, 1, 3],
      [1, 3, 5, 2, 4],
      [2, 4, 1, 3, 5]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '1-5',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '2-5',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '3-5',
      '4-1',
      '4-2',
      '4-3',
      '4-4',
      '4-5',
      '5-1',
      '5-2',
      '5-3',
      '5-4',
      '5-5'
    ],
    state: [
      'true',
      'false',
      'true',
      'false',
      'true',

      'false',
      'true',
      'false',
      'true',
      'false',

      'true',
      'false',
      'true',
      'false',
      'true',

      'false',
      'true',
      'false',
      'true',
      'true',

      'true',
      'false',
      'true',
      'true',
      'true'
    ]
  },
  {
    question: [
      [4, 0, 2, 5, 1],
      [0, 1, 0, 3, 0],
      [3, 0, 5, 0, 4],
      [0, 4, 0, 2, 5],
      [2, 5, 0, 0, 3]
    ],
    answer: [
      [4, 3, 2, 5, 1],
      [5, 1, 4, 3, 2],
      [3, 2, 5, 1, 4],
      [1, 4, 3, 2, 5],
      [2, 5, 1, 4, 3]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '1-5',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '2-5',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '3-5',
      '4-1',
      '4-2',
      '4-3',
      '4-4',
      '4-5',
      '5-1',
      '5-2',
      '5-3',
      '5-4',
      '5-5'
    ],
    state: [
      'true',
      'false',
      'true',
      'true',
      'true',

      'false',
      'true',
      'false',
      'true',
      'false',

      'true',
      'false',
      'true',
      'false',
      'true',

      'false',
      'true',
      'false',
      'true',
      'true',

      'true',
      'true',
      'false',
      'false',
      'true'
    ]
  },
  {
    question: [
      [2, 0, 0, 5, 1],
      [0, 1, 0, 4, 3],
      [0, 0, 5, 1, 2],
      [1, 2, 0, 0, 5],
      [3, 5, 1, 0, 0]
    ],
    answer: [
      [2, 4, 3, 5, 1],
      [5, 1, 2, 4, 3],
      [4, 3, 5, 1, 2],
      [1, 2, 4, 3, 5],
      [3, 5, 1, 2, 4]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '1-5',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '2-5',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '3-5',
      '4-1',
      '4-2',
      '4-3',
      '4-4',
      '4-5',
      '5-1',
      '5-2',
      '5-3',
      '5-4',
      '5-5'
    ],
    state: [
      'true',
      'false',
      'false',
      'true',
      'true',

      'false',
      'true',
      'false',
      'true',
      'true',

      'false',
      'false',
      'true',
      'true',
      'true',

      'true',
      'true',
      'false',
      'false',
      'true',

      'true',
      'true',
      'true',
      'false',
      'false'
    ]
  },
  {
    question: [
      [3, 2, 4, 0, 0],
      [0, 1, 3, 0, 4],
      [0, 0, 5, 1, 3],
      [0, 3, 0, 4, 5],
      [4, 0, 1, 3, 0]
    ],
    answer: [
      [3, 2, 4, 5, 1],
      [5, 1, 3, 2, 4],
      [2, 4, 5, 1, 3],
      [1, 3, 2, 4, 5],
      [4, 5, 1, 3, 2]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '1-5',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '2-5',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '3-5',
      '4-1',
      '4-2',
      '4-3',
      '4-4',
      '4-5',
      '5-1',
      '5-2',
      '5-3',
      '5-4',
      '5-5'
    ],
    state: [
      'true',
      'true',
      'true',
      'false',
      'false',

      'false',
      'true',
      'true',
      'false',
      'true',

      'false',
      'false',
      'true',
      'true',
      'true',

      'false',
      'true',
      'false',
      'true',
      'true',

      'true',
      'false',
      'true',
      'true',
      'false'
    ]
  },
  {
    question: [
      [0, 1, 0, 4, 5],
      [5, 0, 2, 1, 0],
      [1, 5, 0, 0, 2],
      [3, 0, 1, 0, 4],
      [0, 3, 0, 2, 1]
    ],
    answer: [
      [2, 1, 3, 4, 5],
      [5, 4, 2, 1, 3],
      [1, 5, 4, 3, 2],
      [3, 2, 1, 5, 4],
      [4, 3, 5, 2, 1]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '1-5',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '2-5',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '3-5',
      '4-1',
      '4-2',
      '4-3',
      '4-4',
      '4-5',
      '5-1',
      '5-2',
      '5-3',
      '5-4',
      '5-5'
    ],
    state: [
      'false',
      'true',
      'false',
      'true',
      'true',

      'true',
      'false',
      'true',
      'true',
      'false',

      'true',
      'true',
      'false',
      'false',
      'true',

      'true',
      'false',
      'true',
      'false',
      'true',

      'false',
      'true',
      'false',
      'true',
      'true'
    ]
  }
])
const rowListSix = ref([
  {
    question: [
      [0, 5, 0, 2, 0, 6],
      [2, 4, 6, 0, 0, 3],
      [1, 2, 4, 0, 6, 5],
      [5, 6, 0, 4, 2, 1],
      [4, 0, 0, 6, 3, 2],
      [6, 0, 2, 0, 1, 0]
    ],
    answer: [
      [3, 5, 1, 2, 4, 6],
      [2, 4, 6, 1, 5, 3],
      [1, 2, 4, 3, 6, 5],
      [5, 6, 3, 4, 2, 1],
      [4, 1, 5, 6, 3, 2],
      [6, 3, 2, 5, 1, 4]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '1-5',
      '1-6',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '2-5',
      '2-6',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '3-5',
      '3-6',
      '4-1',
      '4-2',
      '4-3',
      '4-4',
      '4-5',
      '4-6',
      '5-1',
      '5-2',
      '5-3',
      '5-4',
      '5-5',
      '5-6',
      '6-1',
      '6-2',
      '6-3',
      '6-4',
      '6-5',
      '6-6'
    ],
    state: [
      'false',
      'true',
      'false',
      'true',
      'false',
      'true',

      'true',
      'true',
      'true',
      'false',
      'false',
      'true',

      'true',
      'true',
      'true',
      'false',
      'true',
      'true',

      'true',
      'true',
      'false',
      'true',
      'true',
      'true',

      'true',
      'false',
      'false',
      'true',
      'true',
      'true',

      'true',
      'false',
      'true',
      'false',
      'true',
      'false'
    ]
  },
  {
    question: [
      [1, 3, 0, 2, 5, 6],
      [0, 6, 0, 3, 0, 4],
      [0, 5, 6, 1, 0, 2],
      [3, 0, 2, 4, 6, 0],
      [5, 0, 1, 0, 4, 0],
      [6, 4, 3, 0, 2, 1]
    ],
    answer: [
      [1, 3, 4, 2, 5, 6],
      [2, 6, 5, 3, 1, 4],
      [4, 5, 6, 1, 3, 2],
      [3, 1, 2, 4, 6, 5],
      [5, 2, 1, 6, 4, 3],
      [6, 4, 3, 5, 2, 1]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '1-5',
      '1-6',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '2-5',
      '2-6',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '3-5',
      '3-6',
      '4-1',
      '4-2',
      '4-3',
      '4-4',
      '4-5',
      '4-6',
      '5-1',
      '5-2',
      '5-3',
      '5-4',
      '5-5',
      '5-6',
      '6-1',
      '6-2',
      '6-3',
      '6-4',
      '6-5',
      '6-6'
    ],
    state: [
      'true',
      'true',
      'false',
      'true',
      'true',
      'true',

      'false',
      'true',
      'false',
      'true',
      'false',
      'true',

      'false',
      'true',
      'true',
      'true',
      'false',
      'true',

      'true',
      'false',
      'true',
      'true',
      'true',
      'false',

      'true',
      'false',
      'true',
      'false',
      'true',
      'false',

      'true',
      'true',
      'true',
      'false',
      'true',
      'true'
    ]
  },
  {
    question: [
      [5, 6, 0, 2, 3, 4],
      [2, 0, 3, 0, 0, 5],
      [0, 0, 2, 5, 4, 6],
      [4, 5, 6, 1, 0, 0],
      [3, 0, 0, 4, 0, 2],
      [6, 2, 4, 0, 5, 1]
    ],
    answer: [
      [5, 6, 1, 2, 3, 4],
      [2, 4, 3, 6, 1, 5],
      [1, 3, 2, 5, 4, 6],
      [4, 5, 6, 1, 2, 3],
      [3, 1, 5, 4, 6, 2],
      [6, 2, 4, 3, 5, 1]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '1-5',
      '1-6',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '2-5',
      '2-6',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '3-5',
      '3-6',
      '4-1',
      '4-2',
      '4-3',
      '4-4',
      '4-5',
      '4-6',
      '5-1',
      '5-2',
      '5-3',
      '5-4',
      '5-5',
      '5-6',
      '6-1',
      '6-2',
      '6-3',
      '6-4',
      '6-5',
      '6-6'
    ],
    state: [
      'true',
      'true',
      'false',
      'true',
      'true',
      'true',

      'true',
      'false',
      'true',
      'false',
      'false',
      'true',

      'false',
      'false',
      'true',
      'true',
      'true',
      'true',

      'true',
      'true',
      'true',
      'true',
      'false',
      'false',

      'true',
      'false',
      'false',
      'true',
      'false',
      'true',

      'true',
      'true',
      'true',
      'false',
      'true',
      'true'
    ]
  },
  {
    question: [
      [0, 0, 1, 0, 2, 5],
      [0, 4, 5, 3, 1, 6],
      [5, 2, 6, 0, 0, 3],
      [1, 0, 0, 6, 5, 2],
      [4, 5, 3, 2, 6, 0],
      [6, 1, 0, 5, 0, 0]
    ],
    answer: [
      [3, 6, 1, 4, 2, 5],
      [2, 4, 5, 3, 1, 6],
      [5, 2, 6, 1, 4, 3],
      [1, 3, 4, 6, 5, 2],
      [4, 5, 3, 2, 6, 1],
      [6, 1, 2, 5, 3, 4]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '1-5',
      '1-6',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '2-5',
      '2-6',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '3-5',
      '3-6',
      '4-1',
      '4-2',
      '4-3',
      '4-4',
      '4-5',
      '4-6',
      '5-1',
      '5-2',
      '5-3',
      '5-4',
      '5-5',
      '5-6',
      '6-1',
      '6-2',
      '6-3',
      '6-4',
      '6-5',
      '6-6'
    ],
    state: [
      'false',
      'false',
      'true',
      'false',
      'true',
      'true',

      'false',
      'true',
      'true',
      'true',
      'true',
      'true',

      'true',
      'true',
      'true',
      'false',
      'false',
      'true',

      'true',
      'false',
      'false',
      'true',
      'true',
      'true',

      'true',
      'true',
      'true',
      'true',
      'true',
      'false',

      'true',
      'true',
      'false',
      'true',
      'false',
      'false'
    ]
  },
  {
    question: [
      [0, 6, 4, 0, 5, 3],
      [0, 3, 2, 4, 6, 1],
      [3, 5, 6, 0, 0, 0],
      [0, 0, 0, 5, 3, 6],
      [4, 2, 3, 6, 1, 0],
      [6, 1, 0, 3, 4, 0]
    ],
    answer: [
      [1, 6, 4, 2, 5, 3],
      [5, 3, 2, 4, 6, 1],
      [3, 5, 6, 1, 2, 4],
      [2, 4, 1, 5, 3, 6],
      [4, 2, 3, 6, 1, 5],
      [6, 1, 5, 3, 4, 2]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '1-5',
      '1-6',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '2-5',
      '2-6',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '3-5',
      '3-6',
      '4-1',
      '4-2',
      '4-3',
      '4-4',
      '4-5',
      '4-6',
      '5-1',
      '5-2',
      '5-3',
      '5-4',
      '5-5',
      '5-6',
      '6-1',
      '6-2',
      '6-3',
      '6-4',
      '6-5',
      '6-6'
    ],
    state: [
      'false',
      'true',
      'true',
      'false',
      'true',
      'true',

      'false',
      'true',
      'true',
      'true',
      'true',
      'true',

      'true',
      'true',
      'true',
      'false',
      'false',
      'false',

      'false',
      'false',
      'false',
      'true',
      'true',
      'true',

      'true',
      'true',
      'true',
      'true',
      'true',
      'false',

      'true',
      'true',
      'false',
      'true',
      'true',
      'false'
    ]
  },
  {
    question: [
      [0, 5, 2, 1, 0, 6],
      [3, 6, 1, 0, 5, 2],
      [1, 4, 6, 0, 0, 0],
      [0, 0, 0, 6, 1, 4],
      [5, 1, 0, 2, 6, 3],
      [6, 0, 3, 5, 4, 0]
    ],
    answer: [
      [4, 5, 2, 1, 3, 6],
      [3, 6, 1, 4, 5, 2],
      [1, 4, 6, 3, 2, 5],
      [2, 3, 5, 6, 1, 4],
      [5, 1, 4, 2, 6, 3],
      [6, 2, 3, 5, 4, 1]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '1-5',
      '1-6',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '2-5',
      '2-6',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '3-5',
      '3-6',
      '4-1',
      '4-2',
      '4-3',
      '4-4',
      '4-5',
      '4-6',
      '5-1',
      '5-2',
      '5-3',
      '5-4',
      '5-5',
      '5-6',
      '6-1',
      '6-2',
      '6-3',
      '6-4',
      '6-5',
      '6-6'
    ],
    state: [
      'false',
      'true',
      'true',
      'true',
      'false',
      'true',

      'true',
      'true',
      'true',
      'false',
      'true',
      'true',

      'true',
      'true',
      'true',
      'false',
      'false',
      'false',

      'false',
      'false',
      'false',
      'true',
      'true',
      'true',

      'true',
      'true',
      'false',
      'true',
      'true',
      'true',

      'true',
      'false',
      'true',
      'true',
      'true',
      'false'
    ]
  },
  {
    question: [
      [4, 0, 1, 3, 0, 6],
      [0, 5, 0, 1, 0, 2],
      [1, 4, 0, 2, 3, 5],
      [2, 3, 5, 0, 1, 4],
      [3, 0, 4, 0, 2, 0],
      [5, 0, 2, 4, 0, 3]
    ],
    answer: [
      [4, 2, 1, 3, 5, 6],
      [6, 5, 3, 1, 4, 2],
      [1, 4, 6, 2, 3, 5],
      [2, 3, 5, 6, 1, 4],
      [3, 6, 4, 5, 2, 1],
      [5, 1, 2, 4, 6, 3]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '1-5',
      '1-6',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '2-5',
      '2-6',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '3-5',
      '3-6',
      '4-1',
      '4-2',
      '4-3',
      '4-4',
      '4-5',
      '4-6',
      '5-1',
      '5-2',
      '5-3',
      '5-4',
      '5-5',
      '5-6',
      '6-1',
      '6-2',
      '6-3',
      '6-4',
      '6-5',
      '6-6'
    ],
    state: [
      'true',
      'false',
      'true',
      'true',
      'false',
      'true',

      'false',
      'true',
      'false',
      'true',
      'false',
      'true',

      'true',
      'true',
      'false',
      'true',
      'true',
      'true',

      'true',
      'true',
      'true',
      'false',
      'true',
      'true',

      'true',
      'false',
      'true',
      'false',
      'true',
      'false',

      'true',
      'false',
      'true',
      'true',
      'false',
      'true'
    ]
  },
  {
    question: [
      [0, 0, 0, 3, 2, 0],
      [3, 2, 0, 6, 1, 5],
      [2, 4, 1, 5, 3, 0],
      [0, 6, 3, 1, 4, 2],
      [4, 1, 5, 0, 6, 3],
      [0, 3, 2, 0, 0, 0]
    ],
    answer: [
      [1, 5, 6, 3, 2, 4],
      [3, 2, 4, 6, 1, 5],
      [2, 4, 1, 5, 3, 6],
      [5, 6, 3, 1, 4, 2],
      [4, 1, 5, 2, 6, 3],
      [6, 3, 2, 4, 5, 1]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '1-5',
      '1-6',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '2-5',
      '2-6',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '3-5',
      '3-6',
      '4-1',
      '4-2',
      '4-3',
      '4-4',
      '4-5',
      '4-6',
      '5-1',
      '5-2',
      '5-3',
      '5-4',
      '5-5',
      '5-6',
      '6-1',
      '6-2',
      '6-3',
      '6-4',
      '6-5',
      '6-6'
    ],
    state: [
      'false',
      'false',
      'false',
      'true',
      'true',
      'false',

      'true',
      'true',
      'false',
      'true',
      'true',
      'true',

      'true',
      'true',
      'true',
      'true',
      'true',
      'false',

      'false',
      'true',
      'true',
      'true',
      'true',
      'true',

      'true',
      'true',
      'true',
      'false',
      'true',
      'true',

      'false',
      'true',
      'true',
      'false',
      'false',
      'false'
    ]
  },
  {
    question: [
      [3, 4, 1, 6, 0, 5],
      [0, 0, 0, 0, 3, 4],
      [4, 3, 0, 2, 6, 1],
      [1, 2, 6, 0, 4, 3],
      [2, 1, 0, 0, 0, 0],
      [6, 0, 4, 3, 1, 2]
    ],
    answer: [
      [3, 4, 1, 6, 2, 5],
      [5, 6, 2, 1, 3, 4],
      [4, 3, 5, 2, 6, 1],
      [1, 2, 6, 5, 4, 3],
      [2, 1, 3, 4, 5, 6],
      [6, 5, 4, 3, 1, 2]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '1-5',
      '1-6',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '2-5',
      '2-6',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '3-5',
      '3-6',
      '4-1',
      '4-2',
      '4-3',
      '4-4',
      '4-5',
      '4-6',
      '5-1',
      '5-2',
      '5-3',
      '5-4',
      '5-5',
      '5-6',
      '6-1',
      '6-2',
      '6-3',
      '6-4',
      '6-5',
      '6-6'
    ],
    state: [
      'true',
      'true',
      'true',
      'true',
      'false',
      'true',

      'false',
      'false',
      'false',
      'false',
      'true',
      'true',

      'true',
      'true',
      'false',
      'true',
      'true',
      'true',

      'true',
      'true',
      'true',
      'false',
      'true',
      'true',

      'true',
      'true',
      'false',
      'false',
      'false',
      'false',

      'true',
      'false',
      'true',
      'true',
      'true',
      'true'
    ]
  },
  {
    question: [
      [1, 0, 3, 4, 0, 6],
      [4, 6, 0, 1, 5, 3],
      [5, 1, 6, 0, 0, 0],
      [0, 0, 0, 6, 1, 5],
      [3, 4, 1, 0, 6, 2],
      [6, 0, 5, 3, 0, 1]
    ],
    answer: [
      [1, 5, 3, 4, 2, 6],
      [4, 6, 2, 1, 5, 3],
      [5, 1, 6, 2, 3, 4],
      [2, 3, 4, 6, 1, 5],
      [3, 4, 1, 5, 6, 2],
      [6, 2, 5, 3, 4, 1]
    ],
    itemList: [
      '1-1',
      '1-2',
      '1-3',
      '1-4',
      '1-5',
      '1-6',
      '2-1',
      '2-2',
      '2-3',
      '2-4',
      '2-5',
      '2-6',
      '3-1',
      '3-2',
      '3-3',
      '3-4',
      '3-5',
      '3-6',
      '4-1',
      '4-2',
      '4-3',
      '4-4',
      '4-5',
      '4-6',
      '5-1',
      '5-2',
      '5-3',
      '5-4',
      '5-5',
      '5-6',
      '6-1',
      '6-2',
      '6-3',
      '6-4',
      '6-5',
      '6-6'
    ],
    state: [
      'true',
      'false',
      'true',
      'true',
      'false',
      'true',

      'true',
      'true',
      'false',
      'true',
      'true',
      'true',

      'true',
      'true',
      'true',
      'false',
      'false',
      'false',

      'false',
      'false',
      'false',
      'true',
      'true',
      'true',

      'true',
      'true',
      'true',
      'false',
      'true',
      'true',

      'true',
      'false',
      'true',
      'true',
      'false',
      'true'
    ]
  }
])
// 开始计时
const timmer = ref(null)
const gameTime = ref('00 : 00')
const startTime = ref(0)
const stopTime = ref(0)
const activeOn = ref(null)
const activeColumn = ref(null)
const activePerform = ref(null)
const numberList = ref([])
const zhezhaoShowState = ref(false)
const zhezhaoIsSuccess = ref(true)
const timeMin = ref('00')
const timeSeconds = ref('00')

onShow(() => {
  const game3Hide = uni.getStorageSync('game3Hide')
  if (game3Hide && game3Hide == 'true') {
    console.log(game3Hide)
  } else {
    zhezhaoShow.value = true
    chooseShow.value = true
    sdNum.value = 0
    sdNumOld.value = 0
    rightListOld.value = []
    timmer.value = null
    gameTime.value = '00 : 00'
    activeOn.value = null
    activeColumn.value = null
    activePerform.value = null
    zhezhaoShowState.value = false
    zhezhaoIsSuccess.value = true
    timeMin.value = '00'
    timeSeconds.value = '00'
    startTime.value = 0
    stopTime.value = 0
    numberList.value = [1, 2, 3, 4]
  }
})
onUnload(() => {
  clearInterval(timmer.value)
  timmer.value = null
  uni.removeStorageSync('game3Hide')
})
const playVideo = (str) => {
  const maps = {
    point: '/static/video/point.mp3',
    empty: '/static/video/empty.mp3',
    success: '/static/video/success.mp3'
  }

  let innerAudioContext = uni.createInnerAudioContext()
  innerAudioContext.autoplay = true
  innerAudioContext.src = maps[str]
  innerAudioContext.onPlay(() => {
    console.log('开始播放')
  })

  innerAudioContext.onEnded(() => {
    innerAudioContext.destroy()
    innerAudioContext = null
  })
}
const chooseLevel = (num) => {
  chooseShow.value = false
  sdNumOld.value = num
}
const startGameFun = () => {
  zhezhaoShow.value = false
  sdNum.value = sdNumOld.value
  if (sdNum.value == 4) {
    numberList.value = [1, 2, 3, 4]
  } else if (sdNum.value == 5) {
    numberList.value = [1, 2, 3, 4, 5]
  } else {
    numberList.value = [1, 2, 3, 4, 5, 6]
  }
  generateShuDu()
}
const generateShuDu = () => {
  const num = Math.floor(Math.random() * 10)
  let rightListNew = []
  let answerListOld = []
  let itemList = []
  let stateList = []
  randomNum.value = num
  if (sdNum.value == 4) {
    rightListNew = rowList.value[randomNum.value].question
    answerListOld = rowList.value[randomNum.value].answer
    itemList = rowList.value[randomNum.value].itemList
    stateList = rowList.value[randomNum.value].state
  } else if (sdNum.value == 5) {
    rightListNew = rowListFive.value[randomNum.value].question
    answerListOld = rowListFive.value[randomNum.value].answer
    itemList = rowListFive.value[randomNum.value].itemList
    stateList = rowListFive.value[randomNum.value].state
  } else {
    rightListNew = rowListSix.value[randomNum.value].question
    answerListOld = rowListSix.value[randomNum.value].answer
    itemList = rowListSix.value[randomNum.value].itemList
    stateList = rowListSix.value[randomNum.value].state
  }
  //生成数独
  const dataList = []
  for (let i = 0; i < rightListNew.length; i++) {
    for (let j = 0; j < rightListNew[i].length; j++) {
      const obj = {}
      if (rightListNew[i][j] == 0) {
        rightListNew[i][j] = ''
      }
      obj.num = rightListNew[i][j]
      obj.isNum = answerListOld[i][j]
      dataList.push(obj)
    }
  }
  for (let i = 0; i < itemList.length; i++) {
    dataList[i].perform = itemList[i].split('-')[0]
    dataList[i].column = itemList[i].split('-')[1]
    dataList[i].active = ''
  }
  for (let i = 0; i < stateList.length; i++) {
    dataList[i].state = stateList[i]
  }
  rightListOld.value = dataList
  startFun()
}
// 计时开始
const startFun = () => {
  clearInterval(timmer.value)
  startTime.value = new Date().getTime()
  //   开始之后 时间超过一个小时  就停止了 需要重新玩
  stopTime.value = 60 * 60 * 24 * 1000 + 1000
  //   stopTime.value = 10 * 1000 + 1000 //测试 10s 超时
  timmer.value = setInterval(() => {
    const newDateTime = new Date().getTime() - startTime.value
    if (newDateTime >= stopTime.value) {
      clearInterval(timmer.value)
      zhezhaoShowState.value = true
      zhezhaoIsSuccess.value = false
      console.log('游戏超时自动结束')
    } else {
      gameTime.value = transformTime(newDateTime)
    }
  }, 1000)
}
const transformTime = (date) => {
  var datetime = ''
  //计算出小时数
  var leave1 = date % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
  //计算相差分钟数
  var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
  var minutes =
    Math.floor(leave2 / (60 * 1000)) < 10
      ? '0' + Math.floor(leave2 / (60 * 1000))
      : Math.floor(leave2 / (60 * 1000))
  //计算相差秒数
  var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
  var seconds =
    Math.round(leave3 / 1000) < 10 ? '0' + Math.round(leave3 / 1000) : Math.round(leave3 / 1000)
  datetime = minutes + ' : ' + seconds
  timeMin.value = minutes
  timeSeconds.value = seconds
  return datetime
}
const chooseNum = (item, index) => {
  if (item.state == 'false') {
    activeOn.value = index
    activeColumn.value = item.column
    activePerform.value = item.perform
    for (let i = 0; i < rightListOld.value.length; i++) {
      if (
        item.column == rightListOld.value[i].column ||
        item.perform == rightListOld.value[i].perform
      ) {
        rightListOld.value[i].active = 'on'
      } else {
        rightListOld.value[i].active = ''
      }
    }
  }
}
const fillIn = (item) => {
  if (rightListOld.value[activeOn.value] && rightListOld.value[activeOn.value].num) {
    console.log('已经有值，说明填写正确了')
  } else {
    if (activeOn.value != null) {
      if (item == rightListOld.value[activeOn.value].isNum) {
        rightListOld.value[activeOn.value].num = item
        rightListOld.value[activeOn.value].active = 'on'
        let isFill = false
        for (let i = 0; i < rightListOld.value.length; i++) {
          if (rightListOld.value[i].num == '') {
            isFill = true
          }
        }
        if (isFill == true) {
          playVideo('point')
        } else {
          playVideo('success')
          clearInterval(timmer.value)
          setTimeout(() => {
            zhezhaoShowState.value = true
            zhezhaoIsSuccess.value = true
          }, 1500)
        }
        activeOn.value = null
      } else {
        playVideo('empty')
        rightListOld.value[activeOn.value].active = 'error'
      }
    }
  }
}
const trainAgain = (num) => {
  if (num == 1) {
    zhezhaoShow.value = true
    chooseShow.value = true
    sdNum.value = 0
    sdNumOld.value = 0
    rightListOld.value = []
    timmer.value = null
    gameTime.value = '00 : 00'
    activeOn.value = null
    activeColumn.value = null
    activePerform.value = null
    zhezhaoShowState.value = false
    zhezhaoIsSuccess.value = true
    timeMin.value = '00'
    timeSeconds.value = '00'
    startTime.value = 0
    stopTime.value = 0
    numberList.value = [1, 2, 3, 4]
  } else {
    uni.reLaunch({
      url: '/pages/index/index'
    })
  }
}
</script>

<style lang="scss" scoped>
@keyframes rotate {
  from {
    opacity: 0;
    transform: scale(0);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rotate-two {
  0% {
    transform: scale(0.9);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.9);
  }
}

.wrap {
  position: relative;
  height: 100vh;
  background: #f0eadc;

  .timeGame {
    font-weight: 700;
    color: #431f00;
    text-align: center;

    .time {
      display: inline-block;
      margin: 62rpx 0;
    }
  }

  .listWrap {
    .listWraps {
      display: flex;
      flex-wrap: wrap;
      width: 665rpx;
      margin: 0 auto;
      font-size: 0;
      text-align: left;
      border: 6rpx solid #431f00;

      .items {
        font-size: 76rpx;
        font-weight: 700;
        text-align: center;
        background: #fdf9f1;
        border-top: 1rpx solid #9a8468;
        border-right: 1rpx solid #927b5f;

        &.on {
          background: #f2ead4;
        }

        &.active {
          background: #f8e9c8 !important;
        }

        &.error {
          background: #ffbebe !important;
        }
      }

      &.listWrapsFour {
        .items {
          width: 164rpx;
          height: 164rpx;
          line-height: 164rpx;

          &:nth-child(4n + 4) {
            width: calc(100% - 492rpx);
            border-right: 0;
          }

          &:nth-child(1),
          &:nth-child(2),
          &:nth-child(3),
          &:nth-child(4) {
            border-top: 0;
          }
        }
      }

      &.listWrapsFive {
        .items {
          width: 131.2rpx;
          height: 131.2rpx;
          line-height: 131.2rpx;

          &:nth-child(5n + 5) {
            width: calc(100% - 524.8rpx);
            border-right: 0;
          }

          &:nth-child(1),
          &:nth-child(2),
          &:nth-child(3),
          &:nth-child(4),
          &:nth-child(5) {
            border-top: 0;
          }
        }
      }

      &.listWrapsSix {
        .items {
          width: 109.3rpx;
          height: 109.3rpx;
          line-height: 109.3rpx;

          &:nth-child(6n + 6) {
            width: calc(100% - 546.5rpx);
            border-right: 0;
          }

          &:nth-child(1),
          &:nth-child(2),
          &:nth-child(3),
          &:nth-child(4),
          &:nth-child(5),
          &:nth-child(6) {
            border-top: 0;
          }
        }
      }
    }

    .numberWrap {
      margin-top: 86rpx;
      font-size: 36rpx;
      font-weight: 700;
      color: #431f00;
      text-align: center;

      .number {
        display: flex;
        width: 670rpx;
        margin: 22rpx auto 0;
        font-size: 0;
        background: #fdf9f1;
        border: 4rpx solid #431f00;
        border-radius: 16rpx;

        .item {
          flex: 1;
          font-size: 76rpx;
          font-weight: 700;
          line-height: 164rpx;
          text-align: center;
        }
      }
    }
  }

  .zhezhao {
    position: relative;
    width: 100%;
    height: 100vh;

    .bg {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100vh;
      background: rgb(0 0 0 / 50%);
    }

    .zhezhaoWrap {
      position: fixed;
      top: 280rpx;
      left: 116rpx;
      z-index: 1;
      width: calc(100% - 232rpx);
      font-size: 48rpx;
      color: #fff;
      text-align: center;

      .btnWrap {
        margin-top: 128rpx;

        .btn {
          position: relative;
          height: 142rpx;
          margin-top: 50rpx;
          line-height: 122rpx;
          text-align: center;
          animation: rotate-two 1s infinite;

          &:nth-child(1) {
            margin-top: 0;
          }

          .img {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            width: 100%;
            height: 100%;
          }

          .name {
            position: relative;
            z-index: 1;
          }
        }
      }
    }

    .startGame {
      position: fixed;
      bottom: 300rpx;
      left: 116rpx;
      z-index: 1;
      width: calc(100% - 232rpx);
      font-size: 48rpx;
      color: #fff;
      text-align: center;

      .btnWrap {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);

        .btn {
          position: relative;
          height: 142rpx;
          margin-top: 50rpx;
          line-height: 122rpx;
          text-align: center;
          animation: rotate-two 1s infinite;

          &:nth-child(1) {
            margin-top: 0;
          }

          .img {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            width: 100%;
            height: 100%;
          }

          .name {
            position: relative;
            z-index: 1;
          }
        }
      }
    }

    &.zhezhaoState {
      position: fixed;
      top: 0;
      left: 0;

      .bg {
        background: rgb(0 0 0 / 70%);
      }

      .zhezhaoStateWrap {
        position: fixed;
        top: 184rpx;
        left: 0;
        z-index: 1;
        width: 100%;
        font-size: 64rpx;
        color: #fff;
        text-align: center;

        .overTime {
          margin: 220rpx auto 344rpx;
        }

        .consuming {
          margin-top: 112rpx;
          font-size: 48rpx;

          .name {
            &.mr24 {
              margin-right: 24rpx;
            }

            &.ml24 {
              margin-left: 24rpx;
            }
          }

          .time {
            font-size: 200rpx;
            text-shadow: 0 24rpx 0 rgb(0 0 0 / 60%);
          }
        }

        .btnWrap {
          width: calc(100% - 232rpx);
          margin: 128rpx auto 0;

          .btn {
            position: relative;
            height: 142rpx;
            margin-top: 50rpx;
            line-height: 110rpx;
            text-align: center;
            animation: rotate-two 1s infinite;

            &:nth-child(1) {
              margin-top: 0;
            }

            .img {
              position: absolute;
              top: 0;
              left: 0;
              z-index: 0;
              width: 100%;
              height: 100%;
            }

            .name {
              position: relative;
              z-index: 1;
              font-size: 48rpx;
            }
          }
        }
      }

      &.on {
        animation: rotate 0.3s linear;
      }
    }
  }
}
</style>
